<template>
    <div>
        <ZkModalVue class="class-detail" :title="title" :size="'md'" :visible="visible" @cancel="handleCancel">
            <desc-list :col="2">
                <desc-item term="分类代码" :labelCol="labelCol">{{ info.code }}</desc-item>
                <desc-item term="分类名称" :labelCol="labelCol">{{ info.name }}</desc-item>
            </desc-list>
            <desc-list :col="1">
                <desc-item term="分类图片" :labelCol="labelCol1">
                    <zk-btn>{{info.picUrl}}</zk-btn>
                </desc-item>
            </desc-list>
            <desc-list :col="2">
                <desc-item term="分类状态" :labelCol="labelCol">{{ info.statusStr }}</desc-item>
                <desc-item term="上级分类" :labelCol="labelCol">{{ info.parentName }}</desc-item>
            </desc-list>
        </ZkModalVue>
    </div>
</template>
<script>
    import { DescList, DescItem } from '@/appBase';
    import ZkModalVue from '@/appBase/ZkModal.vue';
    import { BaseStatusEnum } from '@/modules/common/enum/enum';
    import { queryCategoryTreeNode } from '@/api/common';

    export default {
        name: "CategoryDetail",
        components: {
            DescList,
            DescItem,
            ZkModalVue
        },
        data() {
            return {
                title: '分类查看',
                pageLoading: false,
                visible: false,
                labelCol: {
                    span: 8
                },
                labelCol1: {
                    span: 4
                },
                id: null,
                info: {
                    code: null,
                    id: 0,
                    name: null,
                    parentId: 0,
                    /** 图片地址 */
                    picUrl: "",
                    type: 0,
                    status: BaseStatusEnum.ENABLE,
                    parentName: ''
                }
            }
        },
        methods: {
            show(param) {
                Object.assign(this, this.$options.data());
                this.id = param.id;
                this._onOk = param.onOk;
                this._onCancel = param.onCancel;
                this.visible = true;
                queryCategoryTreeNode({ id: this.id }).then((result) => {
                    result.statusStr = BaseStatusEnum.toStr(result.status);
                    Object.assign(this.info, result);
                });
            },
            handleCancel() {
                this.visible = false;
                if (this._onCancel) this._onCancel();
            }
        }
    }
</script>